<template>
    <div class="pic-mile">
         <!-- 加载中动画 -->
         <transition
            leave-active-class="animate__animated animate__fadeOutUp animate__faster">
            <loading  v-if="isLoading"></loading>
         </transition>

        <transition
            enter-active-class="animate__animated animate__fadeInUpBig" >
            <div v-if="!isLoading">
                <div v-for="item in picList" :key="item.id">
                    <pic-card :cardObj="item"></pic-card>
                </div>
            </div>
        </transition>
        
    </div>
</template>
<script>
import picCard from '../components/pic-card.vue'
import loading from '../components/loading.vue'
export default {
    name:"PicMile",
    components:{
        picCard,
        loading
    },
    data(){
        return{
            picList:[],
            isLoading:true,
            loadingTime:200
        }
    },
    mounted(){
        let _loading = localStorage.getItem("_loading");
        // 判断是否发起请求
        if(_loading){
            this.isLoading = _loading;//表示正在请求
        }
        axios.get("/data/picLook_2.json")
        .then(
            res=>{
                this.picList = [...res.data.resData.list]
                // 延迟300毫秒 隐藏正在加载
                let d = setTimeout(()=>{
                    this.isLoading = false;// 隐藏正在加载
                    localStorage.setItem("_loading",false);
                    clearTimeout(d);
                },this.loadingTime);
            }
        )
        .catch(
            err=>{
                console.log(err);
            }
        )
    }
}
</script>
<style lang="scss" scoped>

</style>